☁️ 開場

這篇筆記主要整理自：官方文件 Importing and Exporting Components

🚩 關於 Root Component 根元件

一、什麼是 Root Component？

可以簡單理解為「最上層的元件」，初次 render 時 react 會調用此元件來渲染整個畫面，而 Root Component 常常在專案初建立時，就被一同被創建。

二、建立 React 專案的方式不同，也會有不同的 Root Component 路徑

• 使用 CodeSandbox、Create React App：路徑為 src/App.js
• 使用 Next.js 框架：路徑為 pages/index.js
• 除了以上，但也會根據自己之後的設定而產生不同的 Root Component 路徑

⬇️這裡附上 Create React App 所建立出來的 Root Component 畫面

可以留意元件常會建立成一個檔案，該檔名就跟元件名是一樣的（紫色處）

📦 如何 Export/Import 元件？

一、為何需要 Export/Import 元件 ？

當元件拆分成不同檔案時，我們就需要讓某檔案元件 Export 出去，好讓其他檔案 Import 進來並使用之

二、default Export & Import ？

• 設定預設 export：

  1. 可先定義好元件，最後再匯出

  // List.js
  
  function List(){
      //..
  };
  
  export default List;
  

  2. 或是直接匯出元件（這樣寫甚至可以用匿名函式也能運作，但建議都還是取名會比較容易閱讀，eslint 也會提醒我們用了匿名函式）

  // List.js
  
  export default function List(){
      //..
  };
  

  // List.js
  
  export default function(){
      //..
  };
  

  ❌這樣寫不可以運作

  // List.js
  
  export default const List = function(){
      //..
  };
  

  會噴 error
  *Only expressions, functions or classes are allowed as the default export*

• 要在其他檔案 import 預設 export

  // App.js
  // 以下路徑是假設 App.js 跟 List.js 在同一層資料夾
  
  import MyList from './List.js'
  

  • 特性：import 的名字可以跟 export 的不一樣

三、named Export & Import ？

要區分使用的是 default export 還 named export，就看 export 後面有沒有「default」

• 設定命名 export：

  1. 可先定義好元件，最後再匯出（不同處：要加{}）

  // List.js
  
  function List(){
      //..
  };
  
  export { List };
  

  2. 或是直接匯出元件 (但不可以用匿名函式，原因在於 Import 要用到名字！）

  // List.js
  
  export function List(){
      //..
  };
  

  ⭕️這樣寫可以運作

  // List.js
  
  export const List = function(){
      //..
  };
  

• 要在其他檔案 import named export

  // App.js
  // 以下路徑是假設 App.js 跟 List.js 在同一層資料夾
  
  import { List } from './List.js'
  

  • 特性 1：import 的名字一定要跟 named export 一樣
  • 特性 2：要用 {} 把要 import 的名字包起來

四、整理 default vs named Export 的差異

• default export 一個檔案內只能有一個、可以匿名（但建議取名比較好維護）
• named export 一個檔案內可以有很多個、不可匿名
• 一個檔案內可以同時有 default export ＆ named export
• import default 可以隨意幫它取名
• import named 名字要完全一樣，還要記得大括號{}

⬇️關於寫法官方文件同整的這個圖表很清晰易懂

五、情境題：如何同時引入 default & named Export？

A: import 時 default 寫前面, named 寫後面

以下例子是 Gallery 元件為 default export，Profile 元件是 named export，然後他們是從同一層資料夾的 Gallery.js 檔案 import 進來的

import Gallery, { Profile } from './Gallery.js';

btw 如果副檔名是 .js 在 React 裡其實可以不用寫

🪄 官方文件應用提醒

實務上檔案如果只有一個東西要 export，可以使用 default 就好，有很多個再用 named。有些團隊為了避免在單一檔案混用導致複雜與使用上的困惑，可能會特別挑一種寫法來撰寫，所以可以留意自身團隊是否有對此作統一的規範，沒有唯一解，只有最適解:)！

💃🏻 總結

這份官方文件的總結和其他的很不一樣，是用提問做總結，那我就一一回答當作總結xd

• What a root component file is

  • 專案初始建立時就存在的最上層元件

• How to import and export a component

• When and how to use default and named imports and exports
  （兩題太像，合併回答，以下情境是先定義後匯出，是個人目前喜歡的寫法，其他寫法請參考內文xd）

  • default export: export default List;
  • named export: export { List } ;
  • import default: import List from './List'
  • import named: import { List } from './List'

• How to export multiple components from the same file

  • 使用 named export 就可以寫好多個！

以上，有任何想法或文內有誤、不清楚歡迎提出，謝謝大家 🙏🏻